<template>
  <div class="module-card">
    <div class="module-header">
      <h2 class="module-title">访问统计</h2>
      <div class="flex space-x-1">
        <button 
          class="px-2 py-1 text-xs bg-primary text-white rounded"
          @click="setAccessPeriod('day')"
          :class="{ 'bg-primary text-white': accessPeriod === 'day' }"
        >日</button>
        <button 
          class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
          @click="setAccessPeriod('week')"
          :class="{ 'bg-primary text-white': accessPeriod === 'week' }"
        >周</button>
        <button 
          class="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
          @click="setAccessPeriod('month')"
          :class="{ 'bg-primary text-white': accessPeriod === 'month' }"
        >月</button>
      </div>
    </div>
    <div class="p-4">
      <div class="h-64" ref="accessChart"></div>
      <div class="grid grid-cols-3 gap-2 mt-4">
        <div class="text-center p-2 border border-gray-100 rounded">
          <div class="text-sm text-gray-500">总访问量</div>
          <div class="font-medium mt-1">{{ totalVisits }}</div>
        </div>
        <div class="text-center p-2 border border-gray-100 rounded">
          <div class="text-sm text-gray-500">独立访客</div>
          <div class="font-medium mt-1">{{ uniqueVisitors }}</div>
        </div>
        <div class="text-center p-2 border border-gray-100 rounded">
          <div class="text-sm text-gray-500">平均时长</div>
          <div class="font-medium mt-1">{{ avgDuration }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import * as echarts from 'echarts';

export default {
  setup() {
    const accessChart = ref(null);
    const accessPeriod = ref('day');
    const totalVisits = ref('12,589');
    const uniqueVisitors = ref('3,842');
    const avgDuration = ref('8m32s');
    let chartInstance = null;

    // 获取图表数据
    const getChartData = () => {
      if (accessPeriod.value === 'day') {
        return {
          labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
          values: [120, 80, 60, 320, 580, 720, 650, 380]
        };
      } else if (accessPeriod.value === 'week') {
        return {
          labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
          values: [1200, 1800, 2100, 1950, 2400, 3200, 2800]
        };
      } else {
        return {
          labels: ['1月', '2月', '3月', '4月', '5月', '6月'],
          values: [12500, 15800, 14200, 18700, 21500, 24800]
        };
      }
    };

    // 初始化图表
    const initChart = () => {
      // 销毁已有实例
      if (chartInstance) {
        chartInstance.dispose();
      }
      
      // 初始化新实例
      chartInstance = echarts.init(accessChart.value);
      
      // 设置图表配置
      const chartData = getChartData();
      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: '{b}: {c} 次访问'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: chartData.labels,
          axisLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.1)'
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          type: 'value',
          beginAtZero: true,
          splitLine: {
            lineStyle: {
              color: 'rgba(0, 0, 0, 0.05)'
            }
          }
        },
        series: [{
          name: '访问量',
          type: 'bar',
          data: chartData.values,
          itemStyle: {
            color: 'rgba(59, 130, 246, 0.7)',
            borderRadius: [4, 4, 0, 0]
          },
          barWidth: '60%'
        }]
      };
      
      chartInstance.setOption(option);
    };

    // 切换统计周期
    const setAccessPeriod = (period) => {
      accessPeriod.value = period;
      initChart();
    };

    // 窗口大小变化时重绘图表
    const handleResize = () => {
      chartInstance?.resize();
    };

    onMounted(() => {
      initChart();
      window.addEventListener('resize', handleResize);
    });

    onBeforeUnmount(() => {
      window.removeEventListener('resize', handleResize);
      if (chartInstance) {
        chartInstance.dispose();
      }
    });

    return {
      accessChart,
      accessPeriod,
      totalVisits,
      uniqueVisitors,
      avgDuration,
      setAccessPeriod
    };
  }
};
</script>

<style scoped>
/* 保持与原页面一致的样式 */
.bg-primary {
  background-color: #3b82f6;
}
.text-white {
  color: #ffffff;
}
.text-gray-600 {
  color: #4b5563;
}
.hover\:bg-gray-100:hover {
  background-color: #f3f4f6;
}
</style>